<template>
	<view class="main">
		<view style="display: flex;">
			<view class="rightheader">
				<view class="scan" @click="doScan"><u-icon size="30" name="scan"></u-icon></view>
			</view>
			<view class="header">
					<u-input v-model="scanResult" shape="square" :show-action="false" @confirm="getData"></u-input>
				    <!-- <input class="search-input" type="text" v-model="searchValue" @confirm="doSearch"> -->
			</view>
		</view>
		
		<view class="content">
			<view v-for="(item, index) in dataForm" :key="index">
				<view>工单：{{item.workOrderId || ''}}</view>
				<view>物流单号： {{item.postCode || ''}}</view>
				<view>物流公司：{{item.postCompany || ''}}</view>
				<view>费用金额：{{item.cost || ''}}</view>
				<view>费用类型：{{item.costTypeName || ''}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from "@/utils/request.js"
	export default {
	  data() {
	    return {
	      // searchValue: '', // 搜索框输入的值
	      scanResult: '',// 扫码结果
		  dataForm: []
	    }
	  },
	  methods: {
	    doScan() {
	      uni.scanCode({
	        success: (res) => {
	          this.scanResult = res.result // 将扫码结果存入数据中
			  this.getData();
	        }
	      })
	    },
		getData() {
			if (!this.scanResult) {
			        return;
			      }
			request({
				method: "GET",
				url: `system/orderCost/list/?postCode=${this.scanResult}`
			}).then(res => {
				console.log('响应：', res);
				this.dataForm = res.rows;
			})
		},
	  },
	  watch: {
	    searchValue: {
	        handler() {
	        	this.getData()
	        },
	        immediate: true // Fetch data immediately when the component is created
	      }
	 }
	}
</script>

<style lang="scss" scoped>
.main {
	background: rgb(244, 249, 254);
	height: 100vh;
	.header {
		position: relative;
		box-sizing: border-box;
		width: 89%;
		position: sticky;
		top: 0;
		z-index: 999;
		display: flex;
		overflow: hidden;
		justify-content: space-around;
		background:#f4f9fe;
		box-shadow:0px 3px 10px rgba(0, 124, 233, 0.16);
		margin-bottom: 10upx;
		/deep/ .u-search__content {
			background-color: #ffffff !important;
		}
		/deep/ .u-search__content__input {
			background-color: #ffffff !important;
		}
		.scan {
			position: absolute;
			top: 8upx;
			right: 14px;
		}

	}
	.rightheader {
		position: relative;
		box-sizing: border-box;
		width: 13%;
		position: sticky;
		top: 0;
		z-index: 999;
		display: flex;
		overflow: hidden;
		justify-content: space-around;
		background: rgb(255, 255, 255);
		box-shadow:0px 3px 10px rgba(0, 124, 233, 0.16);
		margin-bottom: 10upx;
		.scan {
			position: absolute;
			top: 8upx;
			right: 14px;
		}
	}
	.content {
		background:#f4f9fe;
		border:1px solid;
		border-color:rgba(0, 124, 233, 0.4);
		margin: 20upx;
		border-radius: 2%;
		padding: 20upx;
	}
}
</style>
